<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{padding: 0; margin: 0; list-style-type: none;}
    .cont{ width: 800px; height: auto; margin: 10px auto; background: #fff; overflow: hidden; display: grid; grid-template-columns: repeat(4, 1fr);  }
    .lis{  height: 400px; flex: none; margin: 10px; transition: all 0.5s; position: relative; overflow: hidden; }
    .nc{position: absolute; bottom: -100%; width: 100%; height: 100%; background-color: aqua;}
    /* .active .nc { animation: yundong 1s linear forwards; } */
    @keyframes yundong {
        0% { bottom: -100%; }
        100% { bottom: 0; }
    }
</style>
<body>
    <div class="cont">
        <div class="lis"><div class="nc">123</div></div>
        <div class="lis"><div class="nc">123</div></div>
        <div class="lis"><div class="nc">123</div></div>
        <div class="lis"><div class="nc">123</div></div>
        <div class="lis"><div class="nc">123</div></div>
        <div class="lis"><div class="nc">123</div></div>
        <div class="lis"><div class="nc">123</div></div>
        <div class="lis"><div class="nc">123</div></div>
        <div class="lis"><div class="nc">123</div></div>
        <div class="lis"><div class="nc">123</div></div>
        <div class="lis"><div class="nc">123</div></div>
        <div class="lis"><div class="nc">123</div></div>
        <div class="lis"><div class="nc">123</div></div>
        <div class="lis"><div class="nc">123</div></div>
        <div class="lis"><div class="nc">123</div></div>
        <div class="lis"><div class="nc">123</div></div>
        <div class="lis"><div class="nc">123</div></div>
    </div>
    <script>
        let cont = document.querySelector('.cont');
        let lis = document.querySelectorAll('.lis');
        //方法一
        // lis.forEach(function(item){
        //     document.addEventListener('scroll',function(event){
        //         let rect = item.getBoundingClientRect();
        //         //判断item在视口范围内
        //         if(rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth)){
        //             item.style.background = '#000';
        //         }else{
        //             item.style.background = '#f00';
        //         }
        //     })
        // })
          addBoxcont();
        //方法二
          document.addEventListener('scroll',function(event){
            addBoxcont();
          })

        

        function addBoxcont(){
            lis.forEach(function(item,index){
            let rect = item.getBoundingClientRect();
                //判断item在视口范围内
                if(rect.top<window.innerHeight && rect.bottom<window.innerHeight && rect.top>0 && rect.bottom>0){
                    item.classList.add('active');
                    foreachActive();
                }else if(rect.bottom<0 && rect.top<window.innerHeight){
                    item.classList.add('active');
                    foreachActive();
                }else{
                    item.classList.remove('active');
                }
            });
        }
       

        function foreachActive(){
            const liss = document.querySelectorAll('.active');
            liss.forEach(function(item,index){
                if(item.classList.contains('active')){
                    item.querySelector('.nc').style.animation = 'yundong 1s forwards';
                    item.querySelector('.nc').style.animationDelay = (index+1) * 0.1 + "s";
                }
            })
        }
    </script>
</body>
</html>